<!-- frontend/src/components/User.vue -->
<template>
	<div class="user-manager">
		<div class="query-form">
			<!-- 添加ref属性 -->
			<el-form inline :model="queryForm" ref="formRef">
				<el-form-item label="菜单名称" prop="menuName">
					<el-input v-model="queryForm.menuName" placeholder="请输入菜单名称" />
				</el-form-item>
				<el-form-item label="菜单状态" prop="menuState">
					<el-select v-model="queryForm.menuState">
						<el-option :value="1" label="正常"></el-option>
						<el-option :value="2" label="停用"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery">查询</el-button>
					<!-- handleReset 传参 -->
					<el-button @click="handleReset(formRef)">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="base-table">
			<div class="action">
				<el-button type="primary" @click="handleAdd">新增</el-button>
			</div>
			<!-- 渲染成树形菜单 需要设置row-key 和 tree-props -->
			<!-- tree-props 非必填, 如果你的返回数据已经名字叫children了, 就不用写 -->
			<el-table :data="menuList" row-key="_id" :tree-props="{ children: 'children' }">
				<el-table-column
					v-for="item in columns"
					:key="item.prop"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:formatter="item.formatter"
				/>
				<el-table-column fixed="right" label="操作" width="190">
					<template #default="scope">
						<el-button size="small" @click="handleAddSubMenu(scope.row)">新增</el-button>
						<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button
							:disabled="scope.row.state === 2"
							type="danger"
							@click="handleDelete(scope.row.userId)"
							size="small"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="菜单新增" v-model="showModal" :before-close="dialogClose">
			<el-form ref="dialogForm" :model="menuForm" label-width="100px" :rules="rules">
				<el-form-item label="父级菜单" prop="parentId">
					<el-cascader
						v-model="menuForm.parentId"
						:options="menuList"
						:props="{ checkStrictly: true, value: '_id', label: 'menuName' }"
						clearable
					/>
					<span>不选，则直接创建一级菜单</span>
				</el-form-item>
				<el-form-item label="菜单类型" prop="menuType">
					<el-radio-group v-model="menuForm.menuType">
						<el-radio :label="1">菜单</el-radio>
						<el-radio :label="2">按钮</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="菜单名称" prop="menuName">
					<el-input v-model="menuForm.menuName" placeholder="请输入菜单名称" />
				</el-form-item>
				<el-form-item label="菜单图标" prop="icon" v-show="menuForm.menuType === 1">
					<el-input v-model="menuForm.icon" placeholder="请输入岗位" />
				</el-form-item>
				<el-form-item label="路由地址" prop="path" v-show="menuForm.menuType === 1">
					<el-input v-model="menuForm.path" placeholder="请输入路由地址" />
				</el-form-item>
				<el-form-item label="权限标识" prop="menuCode" v-show="menuForm.menuType === 2">
					<el-input v-model="menuForm.menuCode" placeholder="请输入权限标识" />
				</el-form-item>
				<el-form-item label="组件路径" prop="component" v-show="menuForm.menuType === 1">
					<el-input v-model="menuForm.component" placeholder="请输入组件路径" />
				</el-form-item>
				<el-form-item label="菜单状态" prop="menuState" v-show="menuForm.menuType === 1">
					<el-radio-group v-model="menuForm.menuState">
						<el-radio :label="1">正常</el-radio>
						<el-radio :label="2">停用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose(dialogForm)">取 消</el-button>
					<el-button type="primary" @click="handleSubmit(dialogForm)">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { nextTick, onMounted, reactive, ref, toRaw } from "vue";
import api from "@/api";
import util from "@/utils/util";
import { ElMessage } from "element-plus";
// 表单引用
const formRef = ref();
const dialogForm = ref();
// 定义相关的动作
const action = ref("add");
const actionName = ref("添加");
// 控制对话框显示和隐藏
const showModal = ref(false);
const menuForm = reactive({
	parentId: [null],
	menuType: 1,
	menuState: 1,
});
// 定义相关的变量
const queryForm = reactive({
	menuState: 1,
});
const menuList = ref([]);
// 定义列名
const columns = [
	{
		label: "菜单名称",
		prop: "menuName",
		width: 150,
	},
	{
		label: "图标",
		prop: "icon",
	},
	{
		label: "菜单类型",
		prop: "menuType",
		formatter(row, column, value) {
			return {
				1: "菜单",
				2: "按钮",
			}[value];
		},
	},
	{
		label: "权限标识",
		prop: "menuCode",
	},
	{
		label: "路由地址",
		prop: "path",
	},
	{
		label: "组件路径",
		prop: "component",
	},
	{
		label: "菜单状态",
		prop: "menuState",
		width: 90,
		formatter(row, column, value) {
			return {
				1: "正常",
				2: "停用",
			}[value];
		},
	},
	{
		label: "创建时间",
		prop: "createTime",
		formatter(row, column, value) {
			return util.utc2beijing(value);
		},
	},
];
// 定义表单校验规则
const rules = reactive({
	menuName: [
		{
			required: true,
			message: "请输入菜单名称",
			trigger: "blur",
		},
		{
			min: 2,
			max: 10,
			message: "长度在2-8个字符",
			trigger: "blur",
		},
	],
});
onMounted(() => {
	// dom挂载完毕, 请求目录列表
	getMenuList();
});
// 点击右上角的×, 关闭对话框
function dialogClose() {
	handleClose(dialogForm.value);
}
// 点击弹框的取消按钮
function handleClose(formEl) {
	// 重置表单
	handleReset(formEl);
	// 关闭弹框
	showModal.value = false;
}
// 定义相关的方法, 不然警告
// 查询函数
function handleQuery() {
	// 请求接口
	getMenuList();
}
// 重置函数
function handleReset(formEl) {
	formEl.resetFields();
	// 重新请求菜单列表
	getMenuList();
}
function handleDelete(menuId) {
	// 获取菜单id, 后台通过菜单id, 删除菜单, 以及下面的子菜单
	// 改名字
	action.value = "delete";
	actionName.value = "删除";
	// 走 ajax
	api.menuSubmit({ _id: menuId, action: "delete" }).then((res) => {
		console.log(res);
		if (res) {
			// 弹框提醒用户
			ElMessage.success(actionName.value + "菜单成功!");
			// 重新请求菜单列表
			getMenuList();
		} else {
			ElMessage.error(actionName.value + "菜单失败!");
			return false;
		}
	});
}
function handleEdit(row) {
	// 修改名称
	action.value = "edit";
	actionName.value = "编辑";
	// 开启弹框
	showModal.value = true;
	// 防止重置失效
	nextTick(() => {
		Object.assign(menuForm, row);
	});
}
function handleAdd() {
	showModal.value = true;
	// 修改名称
	action.value = "add";
	actionName.value = "新增";
}
function handleAddSubMenu(row) {
	showModal.value = true;
	// 因为是子菜单, 所以需要计算父id, 是一个数组
	menuForm.parentId = [...row.parentId, row._id].filter((item) => item);
}
// 菜单操作, 提交
function handleSubmit(formRef) {
	formRef.validate((valid) => {
		// 如果结果为true
		if (valid) {
			console.log("正在请求新建菜单接口...");
			let params = { ...toRaw(menuForm) };
			params.action = action.value;
			// 提交用户信息到服务器
			api.menuSubmit(params).then((res) => {
				console.log(res);
				if (res) {
					// 弹框提醒用户
					ElMessage.success(actionName.value + "菜单成功!");
					// 关闭对话框
					showModal.value = false;
					// 重置表单
					handleReset(formRef);
					// 重新请求菜单列表
					getMenuList();
				} else {
					ElMessage.error(actionName.value + "菜单失败!");
					return false;
				}
			});
		} else {
			ElMessage.error("校验表单失败");
			return false;
		}
	});
}
// 调用菜单接口
function getMenuList() {
	const params = { ...queryForm };
	api.menuList(params).then((res) => {
		// 更新userMenu的数据
		menuList.value = res;
		if (res.length === 0) {
			ElMessage.error("暂无数据!");
		}
	});
}
</script>
<style></style>
